<template>
  <div class="userDetail">
    <div>
      <div class="user_img">
        <img v-if="userInfo.user_img" :src="userInfo.user_img" alt="" />
        <img src="~images/head_img.png" alt="" v-else />
      </div>
      <div class="user_edit">
        <div>
          <p>
            <span>2107万</span>
            <span class="user_text">粉丝</span>
          </p>
          <p>
            <span>1</span>
            <span class="user_text">关注</span>
          </p>
          <p>
            <span>10W+</span>
            <span class="user_text">获赞</span>
          </p>
        </div>
        <div @click="$router.push('/edit')">
          <div class="user_editBtn">编辑资料</div>
        </div>
      </div>
    </div>
    <div>
      <h2>{{ userInfo.name }}__</h2>
      <p v-if="userInfo.user_desc">{{ userInfo.user_desc }}</p>
      <p v-else>这个人很懒，什么都没有留下</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['userInfo'],
  }
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'

  .userDetail
    background-color: white
    padding: 0 3.333vw

    >div:nth-child(1)
      display: flex

      .user_img
        margin-right: 5.556vw

        img
          height: 23.611vw
          width: 23.611vw
          border-radius: 50%

      .user_edit
        flex: 1
        margin-top: 10px

        div:nth-child(1)
          display: flex

          p
            flex: 1
            centerStyle()
            flex-direction: column // 纵向排列
            font-size: 3.333vw

            .user_text
              color: #aaa

          p:nth-child(1), p:nth-child(2)
            border-right: 0.278vw solid #ccc

        div:nth-child(2)
          padding: 0.556vw 2.778vw

          .user_editBtn
            border: 0.278vw solid #fb7a9f
            margin-top: 10px
            padding: 0.833vw
            centerStyle()
            border-radius: 1.111vw
            color: #fb7a9f

    >div:nth-child(2)
      h2
        margin: 10px 0 3px 0
        font-weight: 350

      p
        padding: 0
        margin: 10px 0
        color: #999
</style>